<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打标签</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .app {
            text-align: center;
        }

        .succ_num {
            color: red;
            font-size: 2em;
            padding: 0 5px;
        }
    </style>
</head>

<body>

    <div id="app" class='app' v-on:keyup.enter='submitTag' v-on:keyup.space='refreshImg'>
        <h1>非常感谢帮忙打标签</h1>
        <h2 style="color: blue;">你已经成功打了<span class="succ_num">{{succ_num}}</span>标签</h2>

        <div style="height: 100px;">
            <el-row justify='center'>
                <el-col :span="10" :offset="9">
                    <el-image id='my_img' style="width: 300px;" :src="img_src" fit="cover"></el-image>
                </el-col>
            </el-row>
        </div>

        <el-row justify='center'>
            <el-col :span="5" :offset="12">
                <el-input ref='ref_img_tag' v-model="img_tag" size="medium" maxlength=4 show-word-limit clearable
                    placeholder="请输入验证码" style="font-size: 18px;text-align: center;">
                </el-input>
            </el-col>
        </el-row>
        <el-row justify='center' style="padding-top: 15px;">
            <el-col :span="15" :offset="6">
                <el-button type="primary" round @click='submitTag' v-on:keyup.enter='submitTag'>提交</el-button>
                <el-button size="small" type="info" round @click='refreshImg'>不确定</el-button>
            </el-col>
        </el-row>
        <!-- {{v_img}} -->
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                succ_num: 0,
                img_tag: '',
                img_url: '/getTagImg',
                base64_img: '',
                img_src: '',
                v_img: '',

            },
            methods: {
                submitTag: function () {
                    //检验参数
                    if (this.img_tag.length < 4) {
                        app.$message({
                            message: '请填写正确的验证码',
                            type: 'error'
                        });

                        app.$refs['ref_img_tag'].focus()
                        return;
                    }

                    axios.post('/tagImg', {
                            img_tag: app.img_tag,
                            v_img: app.v_img,                            
                        })
                        .then(function (response) {
                            data = response.data
                            if (data.status) {
                                app.succ_num = app.succ_num + 1
                                app.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            }else{
                                app.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                            app.getImg()
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                refreshImg: function () {
                    this.getImg()
                    this.$message('刷新了验证码');
                },
                getImg: function () {
                    axios.get(this.img_url, {
                            params: {

                            }
                        })
                        .then(function (response) {
                            app.img_src = 'data:image/png;base64,' + response.data.v_img
                            app.v_img = response.data.v_img
                            app.img_tag = response.data.v_code
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
            },
            mounted: function () {
                this.getImg()
                this.$refs['ref_img_tag'].focus()
            }
        })
    </script>
</body>

</html>